<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">权限代码</label>
            <div class="layui-input-block">
                <input name="id" class="permissionId" type="hidden" th:value="${permissionId}"/>
                <input name="parentId" type="hidden" value=""/>
                <input class="layui-input" lay-verify="required" name="code" placeholder="请输入code" type="text"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">权限名称</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-reqtext="权限名称不能为空" lay-verify="required" name="name"
                       placeholder="请输入角色名称"
                       type="text" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限父节点</label>
            <div class="layui-input-block">
                <div id="LAY-auth-parent-permission"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择菜单</label>
            <div class="layui-input-block">
                <div id="LAY-auth-tree-menu"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">权限介绍</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="intro" placeholder="权限介绍"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-filter="saveBtn" lay-submit>确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'authtree'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            authtree = layui.authtree,
            $ = layui.$;


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        var menus = [];
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.menus = menus;
            $.post("/admin/permission/permissionUpdate", data.field, function (res) {
                if (res.success) {
                    var index = layer.alert(res.msg, {
                        title: '提交信息'
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                        layer.close(parentIndex);
                        //window.parent.location.reload();
                        table.reload('currentTableId');
                    });
                } else {
                    layer.alert(res.msg);
                }
            });
            return false;
        });

        //初始权限色树
        $.post('/admin/permission/permissions', function (data) {
            var trees = authtree.listConvert(data.data.permissions, {
                primaryKey: 'id'
                , startPid: 0
                , parentKey: 'parentId'
                , nameKey: 'name'
                , valueKey: 'id'
            });
            // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
            var checkedId = [];
            checkedId.push(parseInt($('input[name=parentId]').val()));
            authtree.render('#LAY-auth-parent-permission', trees, {
                inputname: 'parentId',
                layfilter: 'lay-check-permission',
                autowidth: true,
                checkType: 'radio',
                checkedKey: checkedId,
                theme: 'auth-skin-default',
                themePath: '/lib/layuimini/js/lay-module/authtree/tree_themes/'
            });
        });

        //初始化权限树authtree
        $.post('/admin/menu/menus?permissionId=' + $('.permissionId').eq(0).val(), function (data) {
            console.log(data.data.checkedId);
            var trees = authtree.listConvert(data.data.menus, {
                primaryKey: 'id'
                , startPid: 0
                , parentKey: 'parentId'
                , nameKey: 'title'
                , valueKey: 'id',
                checkedKey: data.data.checkedId
            });
            // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
            authtree.render('#LAY-auth-tree-menu', trees, {
                inputname: 'menu[]',
                layfilter: 'lay-check-menu',
                autowidth: true,
                theme: 'auth-skin-default',
                themePath: '/lib/layuimini/js/lay-module/authtree/tree_themes/'
            });
        });

        authtree.on('change(lay-check-menu)', function (data) {
            menus = authtree.getChecked('#LAY-auth-tree-menu');
        });

    });
</script>